<!--
1. 什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，
    能够让我们以不同的组件，来划分不同的功能模块，
    将来我们需要什么样的功能，就可以去调用对应的组件即可
2. 组件化和模块化的不同：
    1. 模块化：从代码逻辑的角度进行划分的。方便代码分层开发，保证每个功能模块的职能单一。
    2. 组件化：是从UI界面的角度进行划分的。方便UI组件的重用
3. 创建组件
    1. 方式一
        1. 使用Vue.extend 来创建全局的Vue组件
            Vue.extend({
                template:'' 通过template属性，指定了组件要展示的HTML结构
            })
        2. 使用Vue.component('组件的名称',创建出来的组件模板对象) 注册组件
            Vue.component('myCom1',com1);
        3. 直接把组件的名称以HTML标签的形式引入到页面中即可。驼峰命名法 转化为 -命名法
        4. 组件的template属性指向的模板内容，必须有且只有一个根元素

    2. 方式二
        1. 将第一种方式合并一下。
            Vue.component('myCom2',{
                template: '<h3>Hello Job!</h3>'
            });

    3. 方式三
        1. 在 id=app 的div外面，使用template元素，定义HTML模板结构
        2.
            Vue.component('myCom3',{
                template:'#tmp1'
            });
4. 使用components定义私有组件
    1. 在vm实例中添加components
        components:{
            login:{
                template: '<h1>这是私有的login组件</h1>'
            }
        }
    2. components:{
            login:{
                template: '#id'
            }
        }
5. 组件中的data
    1. data是一个function，并且返回值是一个对象
    2. 返回值是一个对象的原因是这样可以保证每一个实例的独立的。

-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-com1></my-com1>
        <my-com2></my-com2>
        <my-com3></my-com3>
        <login></login>
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>

    <template id="tmp1">
        <div>
            <h1>Hello Job</h1>
        </div>
    </template>

    <template id="tmp2">
        <div>
            <input type="button" value="+1" @click="increment">
            <h3>{{count}}</h3>
        </div>
    </template>


    <script>

        var dataObj={count:0};
        Vue.component('counter',{
            template:'#tmp2',
            data:function () {
                // return dataObj
                return {
                    count:0
                }
            },
            methods: {
                increment(){
                    this.count+=1;
                }
            }
        });

        var com1=Vue.extend({
            template:'<h3>Hello Job!  {{msg}}</h3>',
            data: function () {
                return {
                    msg:"这是组件中定义的msg"
                }
            }
        });

        Vue.component('myCom1',com1);

        Vue.component('myCom2',{
            template: '<h3>Hello Job!</h3>'
        });

        Vue.component('myCom3',{
            template:'#tmp1'
        });

        var vm=new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            components:{
                login:{
                    template: '<h1>这是私有的login组件</h1>'
                }
            }
        })
    </script>
</body>
</html>